import React, { useState, useEffect } from 'react'
import { Layout, Menu, Modal } from 'antd'
import imgurl from '@/static/img/tuichu.png'
import cxy from '@/static/img/cxy.jpg'
import cookie from 'react-cookies'
import { withRouter, Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { getuserinfo } from '@/api/user.js'
import SubMenu from 'antd/lib/menu/SubMenu'

import { menulist } from '@/api/menulist/Menu.js'
import { routeList } from '@/api/menulist/RouteList.js'

const { Sider } = Layout
function SideMenu(props) {
  const [visible, setVisible] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [menu, setmenulist] = useState(menulist)
  const [list, setlist] = useState(routeList)
  const [user, setuser] = useState({})

  // 获取用户信息
  useEffect(async () => {
    console.log(user)
    const res = await getuserinfo()
    setuser(res.user)
  }, [])

  const handleOk = () => {
    setConfirmLoading(true)
    setTimeout(() => {
      setVisible(false)
      setConfirmLoading(false)
      cookie.remove('usertoken')
      props.history.replace('/login')
    }, 1000)
  }


  const randerMenu = list => {
    return list.map(item => {
      if (item.children && item.children.length !== 1) {
        console.log(item.children[0].path);
        console.log(item.path);
        return (
          <SubMenu key={item.path === '/' ? item.children[0].path : item.path} title={item.meta.title} icon={0}>
            {randerMenu(item.children)}
          </SubMenu>
        )
      }
      return (
        <Menu.Item
          key={item.path === '/' ? item.children[0].path : item.path}
          icon={item.icon}
        // onClick={() => {
        //   props.history.push(item.path === '/' ? item.children[0].path : item.path)
        // }}
        >
          {item.path === '/' ? (
            <Link to={item.children[0].path}>{item.meta.title}</Link>
          ) : (
            <Link to={item.path}>{item.meta.title}</Link>
          )}
          {/* {item.meta.title} */}
        </Menu.Item>
      )
    })
  }

  // console.log(props.location.pathname);
  return (
    <Sider trigger={null} collapsible collapsed={props.isCollapsed}>
      <div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
        <div className="logo">
          <a className="sidebar-logo-link">
            <img
              src={require('@/static/img/logo.png')}
              className="sidebar-logo"
            ></img>
            {!props.isCollapsed ? (
              <h1 className="sidebar-title">汇客CRM系统 </h1>
            ) : null}
          </a>
        </div>
        <div style={{ flex: 1, overflow: 'auto' }}>
          <Menu
            className="menumain"
            theme="dark"
            mode="inline"
            selectedKeys={[props.location.pathname]}
            defaultOpenKeys={['/' + props.location.pathname.split('/')[1]]}
          >
            {/* {randerMenu(menu)} */}
            {randerMenu(list)}
          </Menu>
        </div>

        <div
          className="menufooter"
          style={{ flexDirection: props.isCollapsed ? 'column' : 'row' }}
        >
          <div>
            <img src={cxy} className="user-avatar" alt=""></img>
          </div>
          <div
            className="username"
            style={{
              borderRight: props.isCollapsed ? 'unset' : '1px solid #aeb5c4',
            }}
          >
            {user && user.createBy}
          </div>
          <img
            src={imgurl}
            alt=""
            className="user-exit"
            onClick={() => setVisible(true)}
          ></img>
        </div>
      </div>
      <Modal
        title="提示"
        centered
        visible={visible}
        onOk={handleOk}
        onCancel={() => setVisible(false)}
        confirmLoading={confirmLoading}
      >
        <p>确定注销并退出系统吗？</p>
      </Modal>
    </Sider>
  )
}

const mapStateToProps = ({ CollApsedReducer: { isCollapsed } }) => {
  return {
    isCollapsed,
  }
}

const mapDispatchToProps = {
  changeCollapsed() {
    return {
      type: 'change_collapsed',
    }
  },
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(SideMenu))
